<!DOCTYPE html>

<html lang="en" class="no-js">

<head>
    <meta charset="utf-8"/>
    <title>segs</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>
    <link href="/css/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-datetimepicker.css">
    <link href="/vendor/global/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
    <link href="/vendor/global/layout/css/layout.css" rel="stylesheet" type="text/css"/>
    <link href="/vendor/global/layout/css/themes/darkblue.css" rel="stylesheet" type="text/css" id="style_color"/>
    <link rel="stylesheet" href="/layer/mobile/need/layer.css">
    <link href="/vendor/global/components.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="/css/index.css">
    <link rel="shortcut icon" href="/favicon.ico"/>
    <!--<script type="text/javascript" src="/js/jquery.min.js"></script>-->
    <script src="/vendor/global/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="/js/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="/js/bootstrap/js/bootstrapValidator.js"></script>
    <script type="text/javascript" src="/js/moment.js"></script>
    <script type="text/javascript"
            src="/js/jquery.form.js"></script>
    <!-- bootstrap-table.min.js -->
    <script src="/js/bootstrap-table/bootstrap-table.min.js"></script>
    <!-- 引入中文语言包 -->
    <script src="/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript" src="/js/jquery.sselect.js"></script>
    <script type="text/javascript" src="/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript" src="/layer/layer.js"></script>
    <script type="text/javascript" src="/js/dateformat.js"></script>

    <style type="text/css">
        .page-footer {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body class="page-header-fixed page-quick-sidebar-over-content page-sidebar-closed-hide-logo page-container-bg-solid">
<div class="mypage  page-header navbar navbar-fixed-top">
    <div class="page-header-inner">
        <div class="page-logo">
            <a href="/cegs/list">
                CEGS
                <!--<img src="/images/login.png" alt="logo" class="logo-default"/>-->
            </a>
            <div class="menu-toggler sidebar-toggler hide">
            </div>
        </div>
        <a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse"
           data-target=".navbar-collapse">
        </a>
    </div>
</div>
<div class="clearfix">
</div>
<div class="page-container">
    <div class="page-sidebar-wrapper">
        <div class="page-sidebar navbar-collapse collapse">

            <ul class="page-sidebar-menu ">
                <li class="sidebar-toggler-wrapper">
                    <div class="sidebar-toggler">
                    </div>
                </li>
                <li class="start active open">
                    <a href="javascript:;">
                        <i class="icon-home"></i>
                        <span class="title">数据</span>
                        <span class="selected"></span>
                        <span class="arrow open"></span>
                    </a>
                    <ul class="sub-menu">
                        <li class="active">
                            <a href="/cegs/list">
                                <i class="icon-graph"></i>
                                数据列表</a>
                        </li>
                        <li>
                            <a href="/cegs/index">
                                <i class="icon-bar-chart"></i>
                                数据处理</a>
                        </li>

                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="page-content-wrapper">
        <div class="page-content">
            <form class="form-inline" id="fromLlist">
                <div class="row">
                    <div class="form-group">
                        <label for="doorCode">病区名称</label>
                        <select id="doorCode" class="form-control" name="doorCode">
                            <option value="">请选择</option>
                        </select>

                    </div>
                    <div class="form-group">
                        <label for="deviceNo">设备名称</label>
                        <select id="deviceNo" class="form-control" name="deviceNo">
                            <option value="">请选择</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="startTime">开始时间</label>
                        <input type="text" value="" id="startTime" name="startTime" class="form-control"
                               placeholder="请选择开始时间">
                    </div>
                    <div class="form-group">
                        <label for="endTime">结束时间</label>
                        <input type="text" value="" id="endTime" name="endTime" class="form-control"
                               placeholder="请选择结束时间">
                    </div>
                </div>
            </form>
            <div class="form-group mybtn">
                <button class="btn btn-success" id="findbtn">查询</button>
            </div>
            <div class="tablewaper">
                <table id="table"></table>
            </div>
        </div>
    </div>

</div>
<div class="page-footer">
    <div class="page-footer-inner">
        2018-cegs
    </div>

</div>

<script src="/vendor/global/bootstrap.min.js" type="text/javascript"></script>
<script src="/vendor/global/scripts/metronic.js" type="text/javascript"></script>
<script src="/vendor/global/layout/scripts/layout.js" type="text/javascript"></script>
<script src="/vendor/global/admin/pages/scripts/index.js" type="text/javascript"></script>
<script>
    jQuery(document).ready(function () {
        Metronic.init(); // init metronic core componets
        Layout.init(); // init layout
        Index.init();
    });
</script>

<script type="text/javascript">
    $("#doorCode").sselect({url: "/cegs/getDoorInfoList"})
    $("#deviceNo").sselect({url: "/cegs/getDeviceInfoList"})

    $('#startTime,#endTime').datetimepicker({
        format: 'yyyy-mm-dd hh:ii',
        autoclose: true,
        todayBtn: true,
        language: 'zh-CN',
        minView: 1
    });
    var date = new Date;
    $('#startTime').val(date.Format("yyyy-MM-dd" + " 01:00"));
    date.setMinutes(date.getMinutes() + 1);
    $('#endTime').val(date.Format("yyyy-MM-dd hh:mm"));

    $("#findbtn").click(function () {
        $('#table').bootstrapTable('refresh', {
            query: {
                "doorCode": $("#doorCode").val(),
                "deviceNo": $("#deviceNo").val(),
                "startDate": $("#startTime").val(),
                "endDate": $("#endTime").val()
            }
        });
    });

    tableinit();

    function tableinit() {
        $("#table").bootstrapTable({ // 对应table标签的id
            method: "post",
            url: "/cegs/getDoorUserCountList",
            cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
            striped: true,  //表格显示条纹，默认为false
            pagination: false, // 在表格底部显示分页组件，默认false
            pageList: [1, 3], // 设置页面可以显示的数据条数
            pageSize: 3, // 页面数据条数
            pageNumber: 1, // 首页页码
            sidePagination: 'server',
            onClickRow: function (row, $element) {
                row.startDate = $("#startTime").val();
                row.endDate = $("#endTime").val();
                row.deviceNo = $("#deviceNo").val();
                rowData = row;
                layer.open({
                    type: 2,
                    title: '人员列表',
                    maxmin: true,
                    shadeClose: true, //点击遮罩关闭层
                    area: ['800px', '520px'],
                    content: '/cegs/userinfo'
                });
            },
            responseHandler: function (res) {
                return {
                    rows: res.data
                };
            },
            queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
                return {
                    pageSize: params.limit, // 每页要显示的数据条数
                    offset: params.offset, // 每页显示数据的开始行号
                    sort: params.sort, // 要排序的字段
                    sortOrder: params.order,// 排序规则
                    doorCode: $("#doorCode").val(),
                    deviceNo: $("#deviceNo").val(),
                    startDate: $("#startTime").val(),
                    endDate: $("#endTime").val()
                }
            },
            // sortName: 'id', // 要排序的字段
            // sortOrder: 'desc', // 排序规则
            columns: [
                {
                    field: 'doorCode', // 返回json数据中的name
                    title: '病区编号', // 表格表头显示文字
                    align: 'center', // 左右居中
                    valign: 'middle' // 上下居中
                }, {
                    field: 'doorName',
                    title: '病区名称',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    field: 'count',
                    title: '人员数量',
                    align: 'center',
                    valign: 'middle'
                }
            ]

        })
    }
</script>


</body>
</html>